import Seat from './seat.js';
const $ = layui.$;
export default class AddCinema {
  constructor() {
    this.render();
    this.handle();
  }
  render() {
    let template = `
            <form  class="layui-form" lay-filter="addForm">
            <div class="layui-form-item">
            <label class="layui-form-label">院线名称</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="name"
                required
                lay-verify="required"
                placeholder="请输入院线名称"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="addr"
                required
                lay-verify="required"
                placeholder="请输入地址"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="tel"
                required
                lay-verify="required"
                placeholder="请输入电话"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">官方网址</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="url"
                required
                lay-verify="required"
                placeholder="请输入官方网址"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div  class="layui-input-block">
            <button id="addScreenBtn" type="button" class="layui-btn layui-btn-normal layui-btn-radius" >增加放映厅</button>
            </div>
            <div id="screensDiv">
                
            </div>
            </form>
        `;
    $("#addCinemaTemplate").html(template);
  }
  handle() {
    let form = layui.form;
    let table = layui.table;
    let upload = layui.upload;
    let layer = layui.layer;
    $("#addBtn").click(function () {
        let index = 0;
      // 弹出增加学生的窗口
      layer.open({
        type: 1,
        title: "增加院线", //不显示标题栏
        area: ["300px","400px"],
        shade: 0.6,
        id: "LAY_layuipro", //设定一个id，防止重复弹出
        btn: ["确认", "取消"],
        btnAlign: "c",
        moveType: 1, //拖拽模式，0或者1
        content: $("#addCinemaTemplate").html(),
        yes() {
          console.log("yes", form.val("addForm"));
          let screens = [];
            for(let i = 0;i < index;i++){
                if($("#screenDiv"+i).length > 0){
                  screens.push({
                    name:$("#screenName"+i).val(),
                    seat:$("#seat"+i).val()
                  });
                }
               
            }
            // console.log(screens);
          $.ajax({
            type: "post",
            url: "/api/cinemas",
            data: {...form.val("addForm"),screens:JSON.stringify(screens)},
            success() {
              table.reload("cinemaTable");
            },
          });
          layer.closeAll();
        },
        success: function (layero) {
            
            // 给增加放映厅按钮添加事件
            $("#addScreenBtn").click(function(){
                let screenStr = `
                <div id="screenDiv${index}" style="border:1px dashed;margin:10px;padding:10px">
                    <div class="layui-form-item">
                    <label class="layui-form-label">放映厅名</label>
                    <div class="layui-input-block">
                        <input
                        type="text"
                        id="screenName${index}"
                        required
                        lay-verify="required"
                        placeholder="请输入放映厅名"
                        autocomplete="off"
                        class="layui-input"
                        />
                    </div>
                    </div>
                    <div class="layui-form-item">
                    <label class="layui-form-label">座位排列</label>
                    <div class="layui-input-block">
                        <input
                        type="text"
                        id="seat${index}"
                        required
                        lay-verify="required"
                        placeholder="请输入排列"
                        autocomplete="off"
                        class="layui-input"
                        />
                    </div>
                    </div>
                    <div class="layui-form-item">
                    <div class="layui-input-inline">
                    <button type="button" data-index="${index}" class="layui-btn layui-btn-warm layui-btn-radius show-seat-btn">查看</button>
                    <button type="button" data-index="${index}" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn">删除</button>
                    </div>
                    </div>
                </div>
                `;
                $("#screensDiv").append(screenStr);
                index++;
            });
            $("#screensDiv").on("click",".show-seat-btn",function(){
              let index = $(this).attr("data-index");
              new Seat($("#seat"+index).val());
            });
            $("#screensDiv").on("click",".del-seat-btn",function(){
              let index = $(this).attr("data-index");
              $("#screenDiv"+index).remove();
            });
        },
      });

    });
    
  }
}
